<template>
  <div class="loginRegister-outer">
    <div class="loginRegister-sider">
      <div class="sider-banner"></div>
    </div>
    <div class="loginRegister-content">
      <div class="content-header">
        <div class="title">
          <img
            @click="router.push('/shop')"
            class="logo"
            src="@/asset/img/logo.png" />
          {{ $t('loginRegister.title') }}
        </div>
        <div class="nav">
          <a href="javascript:;">{{ $t('loginRegister.userAgreement') }}</a>
          <a href="javascript:;">{{ $t('loginRegister.privacyPolicy') }}</a>
          <a href="javascript:;">{{ $t('loginRegister.help') }}</a>
          <span>|</span>
          <div class="language">
            <div class="dropdown">
              {{ currentLang.name }}
              <svg
                width="14"
                height="14"
                class="mi-language-picker__icon">
                <path
                  d="M10.732 5H3.268c-.224 0-.349.245-.21.413l3.732 4.49a.277.277 0 00.42 0l3.732-4.49c.139-.168.014-.413-.21-.413z"
                  fill="currentColor"
                  fill-rule="nonzero"></path>
              </svg>
            </div>
            <div class="dropdown-container">
              <ul>
                <li
                  @click="changeLang(item)"
                  v-for="(item, index) in otherLang"
                  :key="index">
                  <span>{{ item.name }}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="content-container">
        <div class="lr">
          <div class="we">
            <div class="nav-warp">
              <div class="nav-list">
                <div class="nav-item">
                  <router-link to="login">
                    {{ $t('loginRegister.btnLogin') }}
                  </router-link>
                </div>
                <div class="nav-item">
                  <router-link to="register">
                    {{ $t('loginRegister.btnRegister') }}
                  </router-link>
                </div>
                <div
                  class="nav-line"
                  ref="line"></div>
              </div>
            </div>
            <div class="form">
              <div
                class="form-field"
                v-if="route.name === 'register'">
                <div
                  class="form-control"
                  @click="inputFocus0">
                  <input
                    v-model="user.user_name"
                    type="text"
                    ref="input0" />
                  <label
                    class="floating-label"
                    ref="label0">
                    {{ $t('loginRegister.nickName') }}
                  </label>
                </div>
              </div>
              <div
                class="form-field"
                style="margin-top: 20px">
                <div
                  class="form-control"
                  @click="inputFocus1">
                  <input
                    v-model="user.user_phone"
                    type="text"
                    ref="input1" />
                  <label
                    class="floating-label"
                    ref="label1">
                    {{ $t('loginRegister.phone') }}
                  </label>
                </div>
              </div>
              <div
                class="form-field"
                style="margin-top: 20px">
                <div
                  class="form-control"
                  @click="inputFocus2">
                  <input
                    v-model="user.user_password"
                    type="text"
                    ref="input2" />
                  <label
                    class="floating-label"
                    ref="label2">
                    {{ $t('loginRegister.password') }}
                  </label>
                </div>
              </div>
              <div class="checkbox">
                <Checkbox ref="checkbox"></Checkbox>
                <span>
                  {{ $t('loginRegister.read') }}
                  <a href="JavaScript:;">
                    {{ $t('loginRegister.userAgreement') }}
                  </a>
                  {{ $t('loginRegister.and') }}
                  <a href="JavaScript:;">
                    {{ $t('loginRegister.privacyPolicy') }}
                  </a>
                </span>
              </div>
              <button
                @click="Login(user)"
                ref="btnLogin"
                type="submit"
                v-if="route.name === 'login'">
                {{ $t('loginRegister.btnLogin') }}
              </button>
              <button
                @click="Register(user)"
                ref="btnRegister"
                type="submit"
                v-if="route.name === 'register'">
                {{ $t('loginRegister.btnRegister') }}
              </button>
              <div class="link-box">
                <a href="javascript:;">{{ $t('loginRegister.forget') }}</a>
                <a href="javascript:;">{{ $t('loginRegister.phoneLogin') }}</a>
              </div>
              <!-- <div class="other-login">
                <div class="title">{{ $t('loginRegister.otherLogin') }}</div>
                <div class="login-list">
                  <div class="mi-sns-login__list">
                    <div class="login-item">
                      <span
                        class="login-icon"
                        title="支付宝登录">
                        <svg
                          viewBox="0 0 46 46"
                          width="1em"
                          height="1em"
                          aria-label="alipay">
                          <path
                            d="M10.35 25.898c-.543.439-1.125 1.076-1.294 1.886-.23 1.109-.048 2.496 1.021 3.583 1.296 1.32 3.263 1.68 4.112 1.744 2.31.165 4.77-.978 6.626-2.285a14.633 14.633 0 003.162-3.133c-2.667-1.376-5.996-2.898-9.555-2.75-1.818.076-3.12.454-4.072.956zm33.821 6.09A22.878 22.878 0 0046.001 23C46 10.319 35.683 0 23 0S0 10.319 0 23c0 12.684 10.315 23 23 23 7.654 0 14.441-3.761 18.624-9.53-4.82-2.4-9.646-4.785-14.48-7.156-1.916 2.184-4.746 4.372-7.943 5.324-2.01.598-3.822.825-5.715.438-1.875-.383-3.257-1.261-4.062-2.142-.41-.449-.88-1.02-1.222-1.699.032.086.055.137.055.137s-.196-.337-.346-.876a4.202 4.202 0 01-.16-1.401c-.02-.362.005-.726.077-1.081.187-.91.575-1.967 1.58-2.952 2.203-2.157 5.154-2.274 6.684-2.265 2.265.014 6.201 1.005 9.515 2.178.918-1.957 1.507-4.048 1.886-5.44H13.717v-1.49h7.075v-2.982h-8.567v-1.489h8.565v-2.979c0-.41.081-.745.745-.745h3.352v3.724H34.2v1.49h-9.312v2.98h7.45s-.748 4.17-3.088 8.28c5.192 1.854 12.494 4.71 14.92 5.664z"
                            fill="#1989fa"></path>
                        </svg>
                      </span>
                    </div>
                    <div class="login-item">
                      <span
                        class="login-icon"
                        title="微信登录">
                        <svg
                          viewBox="0 0 46 46"
                          width="1em"
                          height="1em"
                          aria-label="wechat">
                          <g fill="#50b674">
                            <path
                              d="M14.345 17.311a1.505 1.505 0 103.01 0 1.505 1.505 0 00-3.01 0zm6.74-.04a1.505 1.505 0 103.01 0 1.505 1.505 0 00-3.01 0zm3.756 6.732a1.045 1.045 0 102.09 0 1.045 1.045 0 00-2.09 0zm5.31.084a1.045 1.045 0 102.092 0 1.045 1.045 0 00-2.091 0z"></path>
                            <path
                              d="M23 0A23.001 23.001 0 006.736 39.263 23 23 0 0046 22.999 22.984 22.984 0 0023 0zm-3.93 28.311c-1.212 0-2.175-.25-3.387-.501l-3.387 1.673.961-2.885c-2.426-1.674-3.849-3.849-3.849-6.525 0-4.601 4.35-8.197 9.662-8.197 4.725 0 8.906 2.886 9.743 6.774a6.763 6.763 0 00-.921-.042c-4.601 0-8.197 3.429-8.197 7.652.01.676.11 1.348.293 1.998-.335 0-.628.042-.92.042zm14.135 3.387l.71 2.426-2.634-1.463c-.961.25-1.924.502-2.885.502-4.601 0-8.199-3.136-8.199-6.974 0-3.837 3.596-6.984 8.196-6.984 4.35 0 8.197 3.136 8.197 6.984 0 2.133-1.423 4.057-3.387 5.52z"></path>
                          </g>
                        </svg>
                      </span>
                    </div>
                    <div class="login-item">
                      <span
                        class="login-icon"
                        title="QQ登录">
                        <svg
                          viewBox="0 0 46 46"
                          width="1em"
                          height="1em"
                          aria-label="qq">
                          <path
                            d="M23 0C10.31 0 0 10.31 0 23s10.31 23 23 23 23-10.31 23-23S35.69 0 23 0zm10.363 29.926c-.053.053-.106.053-.159.106-.634-.159-1.374-.74-1.692-1.216-.158-.159-.211-.423-.475-.53 0 .953-.582 1.852-1.005 2.486-.159.211-.635.582-.635.793.16.106.37.159.582.212.476.211 1.163.581 1.428 1.004.105.159.264.317.317.476.74 1.745-1.64 2.168-2.855 2.432s-3.49-.476-4.124-.846c-.37-.264-.74-.846-1.322-.846-.159.106-.635.053-.9.053-.74 1.48-4.6 2.168-6.661 1.375-.635-.212-1.956-.793-1.692-1.798.211-.846.899-1.322 1.586-1.639.264-.159.846-.211 1.005-.476-.582-.423-1.11-1.269-1.375-1.956-.159-.37-.212-1.163-.423-1.428-.37.529-1.428 1.64-2.326 1.48-.16-.21-.318-.422-.423-.687-.212-.687-.106-1.797.105-2.432.37-1.322.74-2.273 1.428-3.225.211-.317.529-.529.74-.846-.423-.423-.317-1.692-.053-2.22.159-.37.423-.318.476-.9-.106-.158 0-.37-.053-.581-.211-.952.159-2.115.423-2.855.9-2.38 2.432-4.072 4.706-5.023.529-.212 1.163-.37 1.745-.476.264-.053.528 0 .74-.106 5.34-.053 8.037 2.75 9.041 7.032.159.688 0 1.586 0 2.274 1.216.264 1.48 2.696.476 3.384V23c.37.634.846 1.269 1.163 1.956.318.74.423 1.586.635 2.485.211.687-.106 2.274-.423 2.485z"
                            fill="#18acfc"></path>
                        </svg>
                      </span>
                    </div>
                    <div class="login-item">
                      <span
                        class="login-icon"
                        title="微博登录">
                        <svg
                          viewBox="0 0 46 46"
                          width="1em"
                          height="1em"
                          aria-label="weibo">
                          <g fill="#ea5d5c">
                            <path
                              d="M20.156 21.662c-4.35.21-7.862 2.55-7.862 5.478s3.513 5.144 7.862 4.935c4.35-.21 7.862-2.97 7.862-5.897-.042-2.885-3.555-4.725-7.862-4.516zm2.927 7.402c-1.338 1.756-3.972 2.593-6.523 1.17-1.213-.668-1.171-1.965-1.171-1.965s-.502-4.14 3.847-4.642c4.391-.543 5.186 3.68 3.847 5.437z"></path>
                            <path
                              d="M20.156 26.262a.613.613 0 00-.167.836c.125.251.502.293.752.084.251-.21.377-.585.21-.836-.126-.251-.46-.293-.795-.084zm-2.05.585a1.53 1.53 0 00-1.38 1.506c0 .67.67 1.17 1.465 1.087.794-.083 1.463-.71 1.463-1.422s-.627-1.254-1.547-1.17z"></path>
                            <path
                              d="M23 0C10.287 0 0 10.287 0 23s10.287 23 23 23 23-10.287 23-23S35.713 0 23 0zm8.866 28.144c-1.799 3.847-7.695 5.73-12.044 5.394-4.14-.334-9.493-1.714-10.036-6.816 0 0-.293-2.3 1.923-5.269 0 0 3.178-4.475 6.858-5.77 3.722-1.255 4.14.877 4.14 2.174-.209 1.087-.543 1.714.837 1.296 0 0 3.638-1.715 5.143-.21 1.213 1.214.21 2.928.21 2.928s-.502.544.543.753c.962.167 4.224 1.673 2.425 5.52zm-3.597-10.622a.733.733 0 01-.71-.71c0-.42.334-.712.71-.712 0 0 4.475-.836 3.931 4.015v.083a.723.723 0 01-.71.628.705.705 0 01-.712-.711c0-.084.711-3.304-2.509-2.593zm7.57 4.642c-.126.836-.544.502-1.004.502-.586 0-1.046-.753-1.046-1.339 0-.501.21-1.003.21-1.003.041-.21.543-1.547-.335-3.513-1.59-2.718-4.768-2.718-5.144-2.593-.376.168-.962.251-.962.251-.585 0-1.045-.46-1.045-1.045 0-.502.334-.878.752-1.004 0 0 0 .042.042.042s.084.042.084.042c.46-.084 2.049-.21 3.554.167 2.802.67 6.566 3.764 4.893 9.493z"></path>
                          </g>
                        </svg>
                      </span>
                    </div>
                  </div>
                </div>
              </div> -->
            </div>
          </div>
        </div>
      </div>
      <div class="content-copyrightr">
        小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute, useRouter } from 'vue-router'
import useStore from '@/store'
import { userLogin, userRegister } from '@/api/user'
import { userInfo } from '@/model/userModel'
import { lang } from '@/model/appModel'
import { setTokenTime, setToken } from '@/utils/auth'
import Checkbox from '@/components/checkbox/index.vue'
const route = useRoute()
const router = useRouter()
const { locale } = useI18n()
const { userStore, appStore } = useStore()
const user = ref<userInfo>({
  user_phone: '',
  user_password: '',
  user_name: ''
})
const checkbox = ref<InstanceType<typeof Checkbox>>()
/**
 * @description: 登录功能
 * @param {*} userInfo
 */
const Login = async (userInfo: userInfo) => {
  if (checkbox.value!.checked) {
    const result = await userLogin(userInfo)
    if (result.status === 200) {
      setToken(result.data)
      setTokenTime()
      appStore.token = result.data
      userStore.getUserInfo()
      router.back()
    }
  } else {
    alert('请勾选用户协议！')
  }
}
/**
 * @description: 注册功能
 * @param {*} userInfo
 */
const Register = async (userInfo: userInfo) => {
  if (checkbox.value!.checked) {
    const result = await userRegister(userInfo)
    if (result.status === 200) {
      user.value.user_password = ''
      router.push('/login')
    }
  } else {
    alert('请勾选用户协议！')
  }
}

// 监听改变line的样式
const line = ref<HTMLElement>()
watch(
  () => route.name,
  (newValue, oldValue) => {
    if (appStore.lang === 'en-US') {
      if (newValue === 'register') {
        line.value!.style.left = 87 + 'px'
      } else {
        line.value!.style.left = 0 + 'px'
      }
    } else {
      if (newValue === 'register') {
        line.value!.style.left = 64 + 'px'
      } else {
        line.value!.style.left = 0 + 'px'
      }
    }
  }
)

// 国际化，切换语言
const currentLang = ref<lang>({
  name: '中文(简体)',
  lang: 'zh-CN'
})
const langList = ref<lang[]>([
  {
    name: '中文(简体)',
    lang: 'zh-CN'
  },
  {
    name: '中文(繁体)',
    lang: 'zh-TW'
  },
  {
    name: 'English',
    lang: 'en-US'
  }
])
const otherLang = ref<lang[]>([])
/**
 * @description: 改变语言的方法
 * @param {*} lang
 */
const changeLang = (lang: lang) => {
  appStore.lang = lang.lang
}
watch(
  () => appStore.lang,
  (newValue, oldValue) => {
    otherLang.value = []
    langList.value.forEach(e => {
      if (e.lang !== newValue) {
        otherLang.value!.push(e)
      } else {
        locale.value = e.lang
        localStorage.setItem('lang', e.lang)
        currentLang.value = e
      }
    })
    if (appStore.lang === 'en-US') {
      if (line.value) {
        line.value.style.width = 67 + 'px'
      }
      if (route.name === 'register') {
        if (line.value) line.value.style.left = 87 + 'px'
      } else {
        if (line.value) line.value.style.left = 0 + 'px'
      }
    } else {
      if (line.value) {
        line.value.style.width = 44 + 'px'
      }
      if (route.name === 'register') {
        if (line.value) line.value.style.left = 64 + 'px'
      } else {
        if (line.value) line.value.style.left = 0 + 'px'
      }
    }
  },
  { deep: true, immediate: true }
)
onMounted(() => {
  if (route.name === 'register') {
    line.value!.style.left = 64 + 'px'
  } else {
    line.value!.style.left = 0 + 'px'
  }
  if (appStore.lang === 'en-US') {
    if (line.value) {
      line.value.style.width = 67 + 'px'
    }
  } else {
    if (line.value) {
      line.value.style.width = 44 + 'px'
    }
  }
})

// 监听user改变按钮样式
const btnLogin = ref<HTMLElement>()
const btnRegister = ref<HTMLElement>()
watch(
  user,
  (newValue, oldValue) => {
    const { user_phone: phone, user_password: password } = newValue
    if (phone !== '' && password !== '') {
      if (btnLogin.value) {
        btnLogin.value.style.opacity = '1'
      } else if (btnRegister.value) {
        btnRegister.value.style.opacity = '1'
      }
    } else {
      if (btnLogin.value) {
        btnLogin.value.style.opacity = '0.4'
      } else if (btnRegister.value) {
        btnRegister.value.style.opacity = '0.4'
      }
    }
  },
  { deep: true }
)
// 点击input外侧input聚焦
const input0 = ref<HTMLElement>()
const inputFocus0 = (e: any) => {
  input0.value!.focus()
}
const input1 = ref<HTMLElement>()
const inputFocus1 = (e: any) => {
  input1.value!.focus()
}
const input2 = ref<HTMLElement>()
const inputFocus2 = (e: any) => {
  input2.value!.focus()
}
// 监听改变提示字体样式
const label0 = ref<HTMLElement>()
watch(
  () => user.value.user_name,
  (newValue, oldValue) => {
    if (newValue !== '') {
      label0.value!.style.top = 6 + 'px'
      label0.value!.style.fontSize = 10 + 'px'
    } else {
      label0.value!.style.top = 20 + 'px'
      label0.value!.style.fontSize = 17 + 'px'
    }
  }
)
const label1 = ref<HTMLElement>()
watch(
  () => user.value.user_phone,
  (newValue, oldValue) => {
    if (newValue !== '') {
      label1.value!.style.top = 6 + 'px'
      label1.value!.style.fontSize = 10 + 'px'
    } else {
      label1.value!.style.top = 20 + 'px'
      label1.value!.style.fontSize = 17 + 'px'
    }
  }
)
const label2 = ref<HTMLElement>()
watch(
  () => user.value.user_password,
  (newValue, oldValue) => {
    if (newValue !== '') {
      label2.value!.style.top = 6 + 'px'
      label2.value!.style.fontSize = 10 + 'px'
    } else {
      label2.value!.style.top = 20 + 'px'
      label2.value!.style.fontSize = 17 + 'px'
    }
  }
)
</script>

<style lang="less" scoped>
.loginRegister-outer {
  background-color: #fff;
  display: flex;
  .loginRegister-sider {
    width: 375px;
    flex-shrink: 0;
    flex-grow: 0;
    .sider-banner {
      background-image: url(https://cdn.web-global.fds.api.mi-img.com/mcfe--mi-account/static/static/media/banner.5b1efcd8.jpg);
      background-size: cover;
      background-position: 50%;
      width: 375px;
      height: 100%;
    }
  }
  .loginRegister-content {
    position: relative;
    flex-grow: 1;
    flex-shrink: 1;
    .content-header {
      padding: 20px;
      overflow: hidden;
      .title {
        float: left;
        height: 40px;
        font-size: 26px;
        font-weight: 500;
        color: #333;
        line-height: 40px;
        .logo {
          display: inline-block;
          width: 40px;
          height: 40px;
          font-weight: bold;
          vertical-align: top;
          cursor: pointer;
        }
      }
      .nav {
        float: right;
        a {
          margin-left: 10px;
          margin-right: 10px;
          display: inline-block;
          height: 40px;
          font-size: 14px;
          font-weight: 400;
          color: #838383;
          line-height: 40px;
          &:hover {
            color: #ff6900;
          }
        }
        span {
          margin-left: 10px;
          margin-right: 10px;
          color: #ddd;
        }
        .language {
          // position: relative;
          margin-left: 10px;
          margin-right: 10px;
          display: inline-block;
          height: 40px;
          font-size: 14px;
          font-weight: 400;
          color: #838383;
          line-height: 40px;
          .dropdown {
            svg {
              transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
                -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
              vertical-align: -0.125em;
            }
            &:hover {
              color: #ff6900;
            }
            &:hover svg {
              transform: rotate(180deg);
            }
            &:hover ~ .dropdown-container {
              height: 80px;
              opacity: 1;
            }
          }
          .dropdown-container {
            position: absolute;
            min-width: 83px;
            top: 64px;
            height: 40px;
            opacity: 0;
            overflow: hidden;
            background-color: #fff;
            box-shadow: 0 5px 29px 0 hsl(0deg 0% 64% / 20%);
            transition: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
            &:hover {
              height: 80px;
              opacity: 1;
            }
            ul {
              padding: 0;
              text-align: left;
              border-radius: 2px;
              cursor: pointer;
              li {
                span {
                  color: rgba(0, 0, 0, 0.65);
                }
                &:hover {
                  background-color: rgb(223, 223, 223);
                }
              }
            }
          }
        }
      }
    }
    .content-container {
      padding-top: 20px;
      text-align: center;
      height: 756px;
      .lr {
        border-radius: 4px;
        padding: 40px 45px;
        margin: 0 auto 80px;
        box-shadow: 0 20px 50px 0 hsl(0deg 0% 64% / 10%);
        display: inline-block;
        box-sizing: border-box;
        overflow: hidden;
        position: relative;
        min-width: 450px;
        background-color: #fff;
        .we {
          width: 360px;
          box-sizing: border-box;
          margin: 0;
          padding: 0;
          color: rgba(0, 0, 0, 0.85);
          font-size: 14px;
          display: flex;
          overflow: hidden;
          flex-direction: column;
          .nav-warp {
            position: relative;
            display: inline-block;
            display: flex;
            flex: auto;
            align-self: stretch;
            overflow: hidden;
            white-space: nowrap;
            transform: translate(0);
            .nav-list {
              transform: translate(0px, 0px);
              position: relative;
              display: flex;
              transition: transform 0.3s;
              .nav-item {
                margin: 0 20px 0 0;
                height: 41px;
                line-height: 41px;
                position: relative;
                display: inline-flex;
                align-items: center;
                font-size: 22px;
                background: rgba(0, 0, 0, 0);
                border: 0;
                outline: none;
                cursor: pointer;
              }
              .nav-line {
                left: 0px;
                width: 44px;
                border-radius: 2px;
                height: 4px;
                bottom: 0;
                transition: width 0.3s, left 0.3s, right 0.3s;
                position: absolute;
                background: #ff5c00;
                pointer-events: none;
                box-sizing: border-box;
              }
            }
          }
          .form {
            padding: 40px 2px 0;
            .form-field {
              border-radius: 4px;
              border: 1px solid rgba(0, 0, 0, 0);
              background: #f9f9f9;
              position: relative;
              overflow: hidden;
              width: 100%;
              transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
              user-select: none;
              .form-control {
                position: relative;
                width: 100%;
                input {
                  width: 100%;
                  padding: 30px 20px 10px;
                  border: none;
                  background: rgba(0, 0, 0, 0);
                  height: 60px;
                  box-sizing: border-box;
                  appearance: none;
                  font-size: 17px;
                  color: #333;
                  line-height: 20px;
                  outline: none;
                  &::selection {
                    color: #fff;
                    background-color: #ff6900;
                  }
                  &:focus ~ .floating-label {
                    top: 6px;
                    // color: #f04645;
                    font-size: 10px;
                  }
                }
                .floating-label {
                  left: 20px;
                  cursor: text;
                  user-select: none;
                  position: absolute;
                  top: 20px;
                  height: 20px;
                  font-weight: 400;
                  font-size: 17px;
                  color: rgba(0, 0, 0, 0.4);
                  line-height: 20px;
                  transition: top 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                    font-size 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                    color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
                  max-width: calc(100% - 20px);
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  overflow: hidden;
                }
              }
            }
            .checkbox {
              margin-top: 20px;
              text-align: left;
              font-size: 14px;
              color: rgba(0, 0, 0, 0.85);
              cursor: pointer;

              span {
                color: rgb(189, 189, 189);
              }
            }
            button {
              margin: 20px 0 10px 0;
              background-color: #ff5c00;
              cursor: pointer;
              text-align: center;
              border: none;
              padding: 0 20px;
              border-radius: 4px;
              width: 100%;
              opacity: 0.4;
              color: #fff;
              font-size: 18px;
              font-weight: 400;
              line-height: 60px;
              height: 60px;
              transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
            }
            .link-box {
              display: flex;
              justify-content: space-between;
              a {
                font-size: 16px;
                color: #ff6900;
              }
            }
            .other-login {
              text-align: center;
              .title {
                font-size: 17px;
                font-weight: 400;
                color: #aaa;
                line-height: 40px;
              }
              .login-item {
                cursor: pointer;
                display: inline-block;
                width: 46px;
                margin: 0 12px;
                .login-icon {
                  display: inline-block;
                  width: 46px;
                  font-size: 46px;
                }
              }
            }
          }
        }
      }
    }
    .content-copyrightr {
      left: 0;
      right: 0;
      padding: 0 20px;
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      position: absolute;
      bottom: 20px;
      color: #999;
      font-size: 12px;
    }
  }
}
</style>
